<template>
  <div class="a">
    <van-nav-bar title="黑马头条-登录" />
    <!-- 表单form
    submit: 提交并通过校验触发的事件
     -->
    <van-form @submit="onSubmit">
      <!-- rules: 表单校验规则 -->
      <van-field
        v-model="mobile"
        required
        name="mobile"
        label="手机号"
        placeholder="请输入手机号"
        :rules="[{ required: true, message: '请输入手机号' }]"
      />
      <van-field
        v-model="password"
        required
        type="password"
        name="code"
        label="验证码"
        placeholder="请输入6位验证码"
        :rules="[{ required: true, message: '请输入6位验证码' }]"
      />
      <div style="margin: 16px">
        <!--
          native-type: 组件内原生button标签的type属性(submit点它可以提交所在表单)
         -->
        <van-button
        round
        block
        type="info"
        native-type="submit"
        :loading="buttonIsLoding"
        :disabled="buttonIsLoding"
        loading-text="登录ing..."
          >登录</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'HM-Login',
  data () {
    return {
      mobile: '13888888888',
      password: '246810',
      buttonIsLoding: false // 控制按钮是否进入加载状态(true进入, false不进入)
    }
  },
  methods: {
    ...mapActions(['loginActions']), // 相当于在原地留下一个loginActions函数(注入到当前组件methods选项中)
    async onSubmit (values) { // values: { mobile: '13900002020', code: '999' }
      // values是van-form帮你收集的参数名name值和输入框的值的对象

      this.buttonIsLoding = true // 按钮开始转圈
      try {
        const res = await this.loginActions(values) // 调用actions里方法->发请求去
        console.log(res)
        this.$notify({ type: 'success', message: '登录成功' })
        // this.$router.push() // 产生历史记录可以回退 A -> B -> C
        // this.$router.replace() // 则是替换当前路由, 无法回退
        this.$router.replace('/layout')
      } catch (err) {
        this.$notify({ type: 'danger', message: '登录失败, 请检查手机号和验证码' })
      }

      // 如果成功, catch里不走, 会继续执行try+catch下面代码
      // 如果失败, catch{}里执行后, 也会继续执行try+catch下面代码
      this.buttonIsLoding = false // 按钮停止转圈
    }
  }
}
</script>

<style scoped>
/* scoped
作用: 让这里选择器"只针对"当前组件标签生效
原理:
webpack在翻译此vue文件标签时
会给原生标签上添加data-v-hash值属性
会给组件根标签上添加一样data-v-hash值属性
所有选择器后面都会被自动加上[data-v-hash值]所以只能选中data-v-hash值相同的
这里选择器就只能选中当前标签的了

问题: 组件内的标签不会被加入所以选择器选不中
解决: ::v-deep
样式穿透去选择, 其实就是把属性选择器运行到了前面

*/
/* .van-nav-bar{
  background: #007bff;
}
::v-deep .van-nav-bar__title{
  color: white;
} */
</style>
